<!-- TableView14_12.vue 自定义表头的固定表头表格 -->
<template>
  <div class="table-demo">
    <h2>12. 添加表头固定功能,自定义表头的固定表头表格</h2>
    <p class="description">使用具名插槽自定义表头内容</p>
    
    <div class="table-container">
      <Table
        :data="customers"
        :columns="columns"
        fixed-header
        fixed-header-height="300px"
        border
      >
        <template #header-level>
          <div class="custom-header">
            <span>会员等级</span>
            <el-tooltip content="会员等级说明">
              <i class="info-icon">ℹ️</i>
            </el-tooltip>
          </div>
        </template>
        
        <template #header-points>
          <div class="custom-header">
            <span>积分</span>
            <el-tooltip content="积分规则">
              <i class="info-icon">ℹ️</i>
            </el-tooltip>
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

const customers = ref([
  { id: 1, name: '张三', age: 28, city: '北京', level: '黄金', points: 2800 },
  { id: 2, name: '李四', age: 35, city: '上海', level: '白银', points: 1500 },
  { id: 3, name: '王五', age: 42, city: '广州', level: '铂金', points: 3500 },
  { id: 4, name: '赵六', age: 31, city: '深圳', level: '黄金', points: 2300 },
  { id: 5, name: '钱七', age: 29, city: '杭州', level: '白银', points: 1800 }
])

const columns = ref([
  { title: '姓名', dataIndex: 'name', width: '120px' },
  { title: '年龄', dataIndex: 'age', width: '80px' },
  { title: '城市', dataIndex: 'city', width: '120px' },
  { title: '会员等级', dataIndex: 'level', width: '120px' },
  { title: '积分', dataIndex: 'points', width: '100px' }
])
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.description {
  margin: 16px 0;
  color: #666;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.custom-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-icon {
  cursor: pointer;
  font-size: 14px;
  color: #909399;
}

.info-icon:hover {
  color: #409eff;
}
</style>
